import React, { useState } from "react";
import PanelHeader from "../../../public/assets/home/panel-header.svg";
import PanelBg from "../../../public/assets/home/panel.svg";
import classNames from "classnames";
import "./index.less";

export default ({ children, isOpen }) => {
    let [open, setOpen] = useState(isOpen);
    return (
        <div
            className={classNames({
                "ui-panel": open,
                "ui-panel-small": !open,
            })}
            onClick={() => {
                setOpen(!open);
            }}>
            <div
                className={classNames({
                    "ui-panel-bg": open,
                    "ui-panel-small-bg": !open,
                })}>
                {open ? <PanelBg /> : <PanelHeader />}
            </div>
            <div
                className={classNames({
                    "ui-panel-content": open,
                    "ui-panel-small-content": !open,
                })}>
                <div
                    className={classNames({
                        "ui-panel-header": open,
                        "ui-panel-small-header": !open,
                    })}>
                    <span>塔吊</span>
                </div>
                {open ? <div className="ui-panel-body">{children}</div> : null}
            </div>
        </div>
    );
};
